<!--
  -- 描述：警力分布饼图
     可绑定：
      1、所属单位（报备单位），默认：所有单位
      2、报备日期，默认：当天
      3、报备类型，默认：全部
      4、警种类型，默认：全部
  --
  -- 作者：cyq
  -- 时间：2018/9/8 16:27
-->
<template>
  <div style="position: relative;width: 100%;height: 100%;">
    <div v-show="hasPrep" :id="cid" style="width:100%;height:100%;"></div>
    <div v-if="!hasPrep" class="no-data-tip">{{params.preptime}}无报备信息</div>
    <h2 v-if="!hasPrep&&showTitle" style="padding: 5px 0 0 5px;">{{titleText}}</h2>
  </div>
</template>

<script>
  // 引入 ECharts 主模块
  import echarts from 'echarts/lib/echarts'
  import 'echarts/theme/shine'
  // 引入饼状图
  import 'echarts/lib/chart/pie'
  // 引入提示框和标题组件
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'

  export default {
    name: "PoliceDistributionPie",
    props: ['cid', 'orgCode', 'prepDate',
      'orgName', 'prepType', 'policeType', 'showTitle'],
    data() {
      return {
        titleText: '',
        hasPrep: true,
        // 查询统计参数
        params: {
          preptime: this.prepDate||this.$moment().format('YYYY-MM-DD'),
          prepType: this.prepType,
          orgCode: this.orgCode,
          category: this.policeType,
          orgName: this.orgName
        },
        // 统计图对象
        chartObj: null,
        // 统计数据
        dataList: [],
        prepTypeCN: {
          imp: '重点报备',
          org: '单位报备',
          leader: '领导报备',
          emergency: '应急报备',
          patrol: '巡组报备',
          policearea: '警区报备',
          video: '监控室报备',
          stability: '专项维稳报备',
          activity: '活动保卫报备',
          csf: '联勤力量报备'
        },
        categoryCN: {
          '9': '民警',
          '10': '辅警'
        }
      }
    },
    mounted: function(){
      window.addEventListener('resize',() => this.resize(), false)
    },
    beforeDestroy: function(){
      window.removeEventListener('resize', this.resize(), false);
    },
    methods: {
      query: function(){
        this.api.post('/preparation/piePrep', this.params)
          .then((data) => {
            if(data.code==200){
              this.dataList = data.data;
              this.initChart();
            }else{
              this.$message.error(data.message);
            }
          });
      },
      initChart: function(){
        // 报备类型转义
        let self = this;
        let prepPieDatas = [];
        let typePieDatas = [];
        this.hasPrep = true;
        this.dataList.forEach((item)=>{
            switch (item.TYPE) {
              case 'prep':
                this.hasPrep = item.TOTAL>0;
                prepPieDatas.push({value:item.TOTAL, name:'排班',
                  itemStyle: {
                    color: '#27ae60'
                  }
                });
                break;
              case 'unprep':
                prepPieDatas.push({value:item.TOTAL, name:'未排班',
                  itemStyle: {
                    color: '#c12e34'
                  }
                });
                break;
              default:
                typePieDatas.push({value:item.TOTAL, name:self.prepTypeCN[item.TYPE]||item.TYPE});
                break;
            }
        });

        this.titleText = '所有警力分布情况';
        if(this.params.category)
          this.titleText = this.categoryCN[this.params.category]+'警力分布情况';
        if(this.params.orgName)
          this.titleText += ' - '+this.params.orgName;
        if(!this.chartObj)
          this.chartObj = echarts.init(document.getElementById(this.cid), 'shine');
        this.chartObj.setOption({
          // 统计图标题
          title: {
            text: this.titleText,
            subtext: this.params.preptime,
            textStyle: {
              fontWeight: 'bold'
            },
            show: this.showTitle?true:false
          },
          tooltip: {
            trigger: 'item',
            confine: true,
            formatter: "{b}: {c} ({d}%)"
          },
          // 示例图配置
          // legend: {
          //   orient: 'vertical',
          //   x: 'left',
          //   data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
          // },
          series: [
            // 中心饼图
            {
              name:'排班情况',
              type:'pie',
              selectedMode: 'single',
              radius: [0, '20%'],

              label: {
                normal: {
                  position: 'inner'
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              // 中心饼图数据
              data: prepPieDatas
            },
            // 环状饼图
            {
              name:'报备情况',
              type:'pie',
              radius: ['30%', '55%'],
              // 饼图数据标签样式
              label: {
                normal: {
                  formatter: '{b|{b}：}{c}  {per|{d}%}',
                  rich: {
                    a: {
                      color: '#999',
                      lineHeight: 22,
                      align: 'center'
                    },
                    hr: {
                      borderColor: '#aaa',
                      width: '100%',
                      borderWidth: 0.5,
                      height: 0
                    },
                    b: {
                      fontSize: 13,
                      lineHeight: 33
                    },
                    per: {
                      color: '#eee',
                      backgroundColor: '#334455',
                      padding: [2, 4],
                      borderRadius: 2
                    }
                  }
                }
              },
              // 外环饼图数据
              data: typePieDatas
            }
          ]
        });
      },
      resize: function(){
        if(this.chartObj)
          this.chartObj.resize()
      }
    }
  }
</script>

<style scoped>
.no-data-tip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: darkgrey;
  font-size: 1.5em;
  width: inherit;
  text-align: center;
}
</style>
